<template>
    <div class="wrap">
        <div class="flex">
            <div class="item"></div>
            <div class="item">{{three}}</div>
            <div class="item"></div>
        </div>
        <div class="flex">
            <div class="item">{{four}}</div>
            <div class="item"></div>
            <div class="item">{{two}}</div>
        </div>
        <div class="flex">
            <div class="item"></div>
            <div class="item">{{one}}</div>
            <div class="item"></div>
        </div>
        <div class="input">
            <input v-model="inputStr" type="text" placeholder="从自己开始,逆时针输入奖数">
        </div>
        <div class="input">
            <button @click="win(1)">赢</button>
            <button @click="win(-1)">输</button>
            <button @click="win(-3)">夹</button>
            <button @click="win(-7)">双夹</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            inputStr: '',
            one: '',
            two: '',
            three: '',
            four: ''
        }
    },
    methods:{
        counts(){
            return this.inputStr.split('.')
        },
        countSum(num){
            let countArr = this.counts()
            let myLevel = countArr.splice(num,1)
            let sum = 0
            countArr.forEach(function(item){
                sum += Number(item)
            })
            return [myLevel,sum]
        },
        win(count){
            let isCountOne = this.countSum(0)
            this.one = (isCountOne[0]*3+count) - isCountOne[1]

            let isCountTwo = this.countSum(1)
            this.two = (isCountTwo[0]*3-count) - isCountTwo[1]

            let isCountThree = this.countSum(2)
            this.three = (isCountThree[0]*3+count) - isCountThree[1]

            let isCountFour = this.countSum(3)
            this.four = (isCountFour[0]*3-count) - isCountFour[1]
            
        }
    }
}
</script>
<style scope>
    .flex{
        display: flex;
        justify-content: space-between;
    }
    .item{
        border:1px solid red;
        width:250px;
        height:100px;
        text-align:center;
        line-height:100px;
        font-size:20px;
    }
    .input{
        margin-top:10px;
    }
    .input>input{
        width:320px;
        height:30px;
        text-align:center;
    }
    .input>button{
        margin-left:3px;
        width:78px;
        height:28px;
        text-align:align;
        /* line-height:28px; */
    }
</style>

